<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>物料转仓</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="material-transfer">
      <search-btn-view immediate btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append" v-if="materialList.length>0">
          <el-button size="medium" type="primary" @click="warehouseTransfer(false)">物料转仓</el-button>
          <el-button v-if="hasApproval" size="medium" type="primary" @click="warehouseTransfer(true)">审核过账</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="material-transfer-table-div">
        <el-table fit stripe border :data="materialList" style="width:100%;" height="parent" @selection-change="selectionChange">
          <el-table-column fixed :resizable="false" column-key="selection" type="selection" :selectable="checkSelect" width="40" align="center">
          </el-table-column>
          <el-table-column sortable prop="providerName" label="供应商" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialName" label="物料名称" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="color" label="编号" min-width="100px" header-align="center"></el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="model" label="规格" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="materialDeptName" label="物料部门" min-width="120px" align="center"></el-table-column>
          <el-table-column sortable prop="providerNo" label="供方编号" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable :resizable="false" prop="defaultWarehouse" label="仓库" width="80px" align="center">
          </el-table-column>
          <el-table-column sortable prop="materialUseCount" label="占用数" width="75px" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip sortable prop="count" column-key="count" label="合格数" width="120px" header-align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit">
                <div style="flex: 2">{{scope.row.count}}</div>
                <div style="flex: 1">{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit">
                  <div style="flex: 2">{{scope.row.count}}</div>
                  <div style="flex: 1">{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip sortable prop="noCount" column-key="noCount" label="不合格数" width="120px" header-align="center">
            <template slot-scope="scope">
              <div v-if="!scope.row.hasProduction" class="table-count-unit">
                <div style="flex: 2">{{scope.row.noCount}}</div>
                <div style="flex: 1">{{scope.row.unit}}</div>
              </div>
              <el-popover v-else title="生产单位数量" trigger="hover" placement="right-start">
                <div slot="reference" class="table-count-unit">
                  <div style="flex: 2">{{scope.row.noCount}}</div>
                  <div style="flex: 1">{{scope.row.unit}}</div>
                </div>
                <production-unit-info :warehouse="scope.row"></production-unit-info>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column column-key="position" label="仓位" min-width="100px" header-align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.positionList.length>0">
                <span>{{scope.row.positionList.join(',')}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="转仓数量" width="160px" header-align="center">
            <template slot-scope="scope">
              <el-input-number is-decimal-zero v-if="scope.row.hasSelect" v-model="scope.row.ralationCount" style="width:100%" :controls="false"
                size="mini" :precision="scope.row.countPrecision" :min="1/Math.pow(10,scope.row.countPrecision)" :max="scope.row.maxCount">
              </el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="转仓到" width="160px" header-align="center">
            <template slot-scope="scope">
              <el-select v-if="scope.row.hasSelect" v-model="scope.row.ralationWarehouse" style="width:100%" size="mini">
                <el-option v-for="materialType in materialTypeList" v-if="materialType.value!==scope.row.warehouseType"
                  :key="'materialType_'+materialType.value" :value="materialType.value" :label="materialType.label"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :page-sizes="[10, 15, 20, 40, 50]" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>
  </div>
</body>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);

</script>
<script src="../materialStock/productionUnitInfo.js"></script>
<script src="./searchForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [tablePaginationMixin()],

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        warehouseType: '',
        isValid: '',
        providerNo: '',
        materialDept: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        materialList: [],
        selectMaterialList: [],
        materialTypeList: i18n.getDropDown('common.warehouseMaterial.warehouseType', [4, 2, 3]),
        hasApproval: false
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.checkApprovalPermission().then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      checkApprovalPermission: function () {
        var self = this;
        return PermissionUtil.ajaxCheckPermission(6).then(function (hasApproval) {
          self.hasApproval = hasApproval;
          return hasApproval;
        });
      },

      setMaterialList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize
        };
        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'providerName', 'providerNo', 'warehouseType', 'isValid'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        ajaxRequest("companyMaterialCount/getCompanyMaterialCountList", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          var materialList = res.returnData;
          for (var i = 0; i < materialList.length; i++) {
            var material = materialList[i];
            var positionList = material.positionList;
            if (positionList === null) {
              material.positionList = [];
            }

            var count = material.count;
            material.hasSelect = count > 0;
            material.maxCount = count;
            material.ralationCount = count;

            var countPrecision = SysUtil.getMaterialNumberPrecision(material.unit, 4);
            material.countPrecision = countPrecision;
            material.ralationWarehouse = '';

            SysUtil.tableSetDeptData(material);
          }
          self.materialList = materialList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMaterialList(true);
      },

      pageChange: function () {
        this.setMaterialList();
      },

      selectionChange: function (selectMaterialList) {
        this.selectMaterialList = selectMaterialList;
      },

      warehouseTransfer: function (isAduit) {
        var selectMaterialList = this.selectMaterialList;
        if (selectMaterialList.length === 0) {
          this.$alert('请选择需要转仓的物料', '信息');
          return;
        }
        var postDataList = [];
        var fields = ['materialCode', 'materialName', 'model', 'color', 'providerName', 'warehouseType'];
        for (var i = 0; i < selectMaterialList.length; i++) {
          var material = selectMaterialList[i];
          var ralationCount = material.ralationCount;
          if (ralationCount === undefined) {
            this.$alert('请选择物料转仓数量', '信息');
            return;
          }

          var ralationWarehouse = material.ralationWarehouse;
          if (ralationWarehouse === '') {
            this.$alert('请选择物料转仓到哪个仓库', '信息');
            return;
          }
          var postData = {
            type: 12,
            inOutUnit: material.unit,
            count: ralationCount,
            ralationWarehouse: ralationWarehouse
          };
          SysUtil.setPostData(postData, material, fields, false, true);
          postDataList.push(postData);
        }

        this.loading = true;
        var self = this;
        ajaxRequest('warehouse/warehouseToOtherWarehouse', {
          jsonArray: JSON.stringify(postDataList),
          isAduit: isAduit
        }).then(function (msg) {
          self.$alert(msg, '信息', {
            callback: function () {
              self.setMaterialList();
            }
          });
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      checkSelect: function (material) {
        return material.hasSelect;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ProductionUnitInfo: ProductionUnitInfo
    }
  });

</script>
<style>
  .material-transfer {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .material-transfer .material-transfer-table-div {
    flex: 1;
    overflow: auto;
  }

  .material-transfer .material-transfer-table-div .table-count-unit {
    width: 100%;
    display: flex;
  }

</style>

</html>
